<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<link rel="shortcut icon" href="${staticServerAddress }/title.ico">
		<link rel="stylesheet" href="css/iconfont.css">
		<link rel="stylesheet" href="css/global.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="css/login.css">
		<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
		<script src="js/bootstrap.min.js" charset="UTF-8"></script>
		<script src="js/jquery.form.js" charset="UTF-8"></script>
		<script src="js/global.js" charset="UTF-8"></script>
		<script src="js/login.js" charset="UTF-8"></script>
		<title>微风 - 登录 / 注册</title>
	</head>

	<%
		Cookie[] cookies = request.getCookies();
		if (cookies != null) {
			String username = null;
			String password = null;
			for (Cookie c : cookies) {
				if ("username".equals(c.getName())) {
					username = c.getValue();
				}
				if ("password".equals(c.getName())) {
					password = c.getValue();
				}
			}
			if (username != null && password != null) {
				request.setAttribute("username", username);
				request.setAttribute("password", password);
				request.getRequestDispatcher("login").forward(request, response);
				return;
			}
		}
	%>

	<body>
		<input id="err" type="hidden" value="<%=request.getAttribute("msg") %>">
		<div class="public-head-layout container">
			<a class="logo" href="home"><img src="images/icons/logo.jpg" alt="微风网" class="cover"></a>
		</div>
		<div style="background:url(images/login_bg.jpg) no-repeat center center; ">
			<div class="login-layout container">
				<div class="form-box login">
					<div class="tabs-nav">
						<h2>欢迎登录微风商城平台</h2>
					</div>
					<div class="tabs_container">
						<form class="tabs_form" action="login" method="post" id="login_form">
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
									</div>
									<input class="form-control phone" name="userEmail" id="login_phone" required placeholder="邮箱号" autocomplete="off" type="email">
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
									</div>
									<input class="form-control password" name="userPassword" id="login_pwd" placeholder="请输入密码" autocomplete="off" type="password">
									<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<input class="form-control" name="userCaptcha" id="login_sms" placeholder="验证码不区分大小写" type="text">
									<img src="createCaptcha" style="width: 85px;height: 33px;position: absolute;margin-left: 20px;">
								</div>

							</div>
							<div class="checkbox">
								<label>
	                        	<input id="login_checkbox" type="checkbox" value="y" name="loginCheckbox"><i></i> 30天内免登录
	                        </label>
								<a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
							</div>
							<!-- 错误信息 -->
							<div class="form-group">
								<div class="error_msg" id="resetpwd_error"></div>
							</div>
							<button class="btn btn-large btn-primary btn-lg btn-block" id="login_submit" type="button">登录</button><br>
							<p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>
						</form>
					</div>
				</div>

				<div class="form-box register">
					<div class="tabs-nav">
						<h2>欢迎注册<a href="javascript:;" class="pull-right fz16" id="reglogin">返回登录</a></h2>
					</div>
					<div class="tabs_container">
						<form class="tabs_form" action="register" method="post" id="register_form">
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
									</div>
									<input class="form-control phone" name="userEmail" id="register_phone" required placeholder="邮箱号" autocomplete="off" type="email">
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<input class="form-control" name="userCaptcha" id="register_sms" placeholder="输入验证码" type="text">
									<span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button">发送邮件验证码</button>
								</span>
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
									</div>
									<input class="form-control password" name="userPassword" id="register_pwd" placeholder="请输入密码" autocomplete="off" type="password">
									<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
									</div>
									<input class="form-control rePassword" name="rePassword" id="register_repwd" placeholder="确认密码" autocomplete="off" type="password">
									<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
								</div>
							</div>
							<div class="checkbox">
								<label>
	                        	<input id="register_checkbox" type="checkbox"><i></i> 同意<a href="temp_article/udai_article3.html">微风网用户协议</a>
	                        </label>
							</div>
							<!-- 错误信息 -->
							<div class="form-group">
								<div class="error_msg" id="register_error"></div>
							</div>
							<button class="btn btn-large btn-primary btn-lg btn-block submit" id="register_submit" type="button">注册</button>
						</form>
					</div>
				</div>

				<div class="form-box resetpwd">
					<div class="tabs-nav clearfix">
						<h2>找回密码<a href="javascript:;" class="pull-right fz16" id="pwdlogin">返回登录</a></h2>
					</div>
					<div class="tabs_container">
						<form class="tabs_form" action="findPassword" method="post" id="resetpwd_form">
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
									</div>
									<input class="form-control phone" name="userEmail" id="resetpwd_phone" required placeholder="邮箱号" autocomplete="off" type="email">
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<input class="form-control" name="userCaptcha" id="resetpwd_sms" placeholder="输入验证码" type="text">
									<span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button">发送邮箱验证码</button>
								</span>
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
									</div>
									<input class="form-control password" name="userPassword" id="resetpwd_pwd" placeholder="新的密码" autocomplete="off" type="password">
									<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
									</div>
									<input class="form-control password" name="rePassword" id="resetpwd_repwd" placeholder="确认密码" autocomplete="off" type="password">
									<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
								</div>
							</div>
							<!-- 错误信息 -->
							<div class="form-group">
								<div class="error_msg" id="resetpwd_error"></div>
							</div>
							<button class="btn btn-large btn-primary btn-lg btn-block submit" id="resetpwd_submit" type="button">重置密码</button>
						</form>
					</div>
				</div>

				<script type="text/javascript">
					$(function() {
						if ($('#err').val() != 'null') {
							alert($('#err').val());
						}
					})
					window.onload = function() {
						var img = document.querySelector("[src=createCaptcha]");
						img.onclick = function() {
							img.src = "createCaptcha?date=" + new Date().getTime();
						}
					}
				</script>

				<script>
					$(document).ready(function() {
						// 判断直接进入哪个页面 例如 login.php?p=register
						switch ($.getUrlParam('p')) {
							case 'register':
								$('.register').show();
								break;
							case 'resetpwd':
								$('.resetpwd').show();
								break;
							default:
								$('.login').show();
						};
						// 登录
						$('#login_submit').click(function() {
								var form = $(this).parents('form')
								var phone = form.find('input.phone');
								var pwd = form.find('input.password');
								var error = form.find('.error_msg');
								var success = form.siblings('.tabs_div');
								// 验证手机号参考这个
								switch (phone.validatemobile()) {
									case 1:
										error.html(msgtemp('<strong>邮箱号为空</strong> 请输入邮箱号', 'alert-warning'));
										return;
										break;
									case 2:
										error.html(msgtemp('<strong>邮箱格式错误</strong> 请输入正确邮箱号', 'alert-warning'));
										return;
										break;
								}
								// 验证密码复杂度参考这个
								switch (pwd.validatepwd()) {
									case 1:
										error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码', 'alert-warning'));
										return;
										break;
									case 2:
										error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码', 'alert-warning'));
										return;
										break;
									case 3:
										error.html(msgtemp('<strong>密码过于简单</strong><br>密码需为字母、数字或特殊字符组合', 'alert-warning'));
										return;
										break;
								}
								form.submit();
							})
							// 发送验证码事件
						$('.getsms').click(function() {
							var phone = $(this).parents('form').find('input.phone');
							var error = $(this).parents('form').find('.error_msg');
							var userEmail = phone.val();
							switch (phone.validatemobile()) {
								case 0:
									// 短信验证码的php请求
									$.ajax("sendEmail", {
										dataType: "json",
										data: {
											"userEmail": userEmail
										},
										type: "post",
										success: function(result) {},
										error: function(xhr, e) {
											console.error(e);
										}
									});            
									error.html(msgtemp('验证码 <strong>已发送</strong>', 'alert-success'));
									$(this).rewire(60);
									break;
								case 1:
									error.html(msgtemp('<strong邮箱号为空</strong> 请输入邮箱号', 'alert-warning'));
									break;
								case 2:
									error.html(msgtemp('<strong>邮箱格式错误</strong> 请输入正确邮箱号', 'alert-warning'));
									break;
							}
						});
						//注册
						$('#register_submit').click(function() {
								var form = $(this).parents('form')
								var phone = form.find('input.phone');
								var pwd = form.find('input.password');
								var repwd = form.find('input.rePassword');
								var error = form.find('.error_msg');
								var success = form.siblings('.tabs_div');
								if ($('#register_checkbox').is(":checked")) {
									// 验证手机号参考这个
									switch (phone.validatemobile()) {
										case 1:
											error.html(msgtemp('<strong>邮箱号为空</strong> 请输入邮箱号', 'alert-warning'));
											return;
											break;
										case 2:
											error.html(msgtemp('<strong>邮箱格式错误</strong> 请输入正确邮箱号', 'alert-warning'));
											return;
											break;
									}
									// 验证密码复杂度参考这个
									switch (pwd.validatepwd()) {
										case 1:
											error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码', 'alert-warning'));
											return;
											break;
										case 2:
											error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码', 'alert-warning'));
											return;
											break;
										case 3:
											error.html(msgtemp('<strong>密码过于简单</strong><br>密码需为字母、数字或特殊字符组合', 'alert-warning'));
											return;
											break;
									}
									switch (repwd.validatepwd()) {
										case 1:
											error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码', 'alert-warning'));
											return;
											break;
										case 2:
											error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码', 'alert-warning'));
											return;
											break;
										case 3:
											error.html(msgtemp('<strong>密码过于简单</strong><br>密码需为字母、数字或特殊字符组合', 'alert-warning'));
											return;
											break;
									}
									if (pwd.val() != repwd.val()) {
										error.html(msgtemp('<strong>密码不一致</strong><br>密码和确认密码不一致，请重新输入', 'alert-warning'));
										return;
									}
								} else {
									error.html(msgtemp('<strong>您还没同意协议</strong><br>请阅读并同意该协议', 'alert-warning'));
									return;
								}
								form.submit();
							})
							//找回密码
						$('#resetpwd_submit').click(function() {
							var form = $(this).parents('form')
							var phone = form.find('input.phone');
							var pwd = form.find('input.password');
							var error = form.find('.error_msg');
							var success = form.siblings('.tabs_div');
							// 验证手机号参考这个
							switch (phone.validatemobile()) {
								case 1:
									error.html(msgtemp('<strong>邮箱号为空</strong> 请输入邮箱号', 'alert-warning'));
									return;
									break;
								case 2:
									error.html(msgtemp('<strong>邮箱格式错误</strong> 请输入正确邮箱号', 'alert-warning'));
									return;
									break;
							}
							// 验证密码复杂度参考这个
							switch (pwd.validatepwd()) {
								case 1:
									error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码', 'alert-warning'));
									return;
									break;
								case 2:
									error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码', 'alert-warning'));
									return;
									break;
								case 3:
									error.html(msgtemp('<strong>密码过于简单</strong><br>密码需为字母、数字或特殊字符组合', 'alert-warning'));
									return;
									break;
							}
							form.submit();
						})
					});
				</script>
			</div>
		</div>
		<div class="footer-login container clearfix">
			<ul class="links">
				<a href="#">
					<li>网店代销</li>
				</a>
				<a href="#">
					<li>微风学堂</li>
				</a>
				<a href="#">
					<li>联系我们</li>
				</a>
				<a href="toBreezeArticle10">
					<li>企业简介</li>
				</a>
				<a href="toBreezeArticle5">
					<li>新手上路</li>
				</a>
			</ul>
			<!-- 版权 -->
			<p class="copyright">
				© 2018-2020 微风网 版权所有，并保留所有权利<br>
				ICP备案证书号：渝ICP备20181806号-2&nbsp;&nbsp;&nbsp;&nbsp;重庆市沙坪坝区微电子产业园区&nbsp;&nbsp;&nbsp;&nbsp;Tel: 15881909100&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 15881909100@qq.com
			</p>
		</div>
	</body>

</html>